<script lang="ts" setup>
import { ref ,onMounted } from 'vue';
import {getallcate} from "../../api/allcate";
  let catelist=ref([])
  onMounted(()=>{
      //发送请求，获取数据
      getallcate().then((data:any)=>{
        console.log(data,"fhjksdhfjhfiuweh");
          catelist.value=data.data
          console.log(catelist.value,"4444444444444444");
          
    })
  })
  const center = ref(false)
</script>
<template>
<div class="wode">
  <div class="namm">我的</div>
  <!-- KBN873627861 -->
  <div class="bns">
    <div class="bnsleft">
       <var-image
        width="60px"
        height="60px"
        fit="cover"
        radius="50%"
        src="https://varlet-varletjs.vercel.app/cat.jpg"
        style="margin-top:10px;margin-left:10px;"
      />
    </div>
    <div class="bnsright">
      <div class="bnsrightos1">KBN873627861</div>
      <div>
        <span>157*****465</span>
        <router-link to="/xgsjhm">
          <var-button size="mini" style="margin-left:5px;border-radius:20px;background:#fee8ae;" ><var-icon name="checkbox-marked-outline" size="10" />修改</var-button>
        </router-link>
        </div>
    </div>
  </div>

</div>
<div class="botom">
  <router-link to="/zml">
    <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
    <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-yml-"></use>
          </svg>
        </i>
    </slot>
      <span style="margin-left:5px;font-size: 14px;">我的米粒</span>
      <span style="font-size: 12px;margin-left: 5px;color: #9da0a0;"><span style="color:red">15</span>米粒，可兑换0.15红包</span>
      <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float:right" />
    </li>
  </router-link>
  <router-link to="/mthb">
    <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
    <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-hongbao"></use>
          </svg>
        </i>
    </slot>
      <span style="margin-left:5px;font-size: 14px;">美团红包</span>
      <span style="font-size: 12px;margin-left: 5px;color: #9da0a0;"><span style="color:red;font-size: 18px;">20</span>张</span>
      <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float:right" />
    </li>
  </router-link>
  <router-link to="/sjdjq">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
    <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-43"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">商家代金券</span>
    <span style="font-size: 12px;margin-left: 5px;color: #9da0a0;"><span style="color:red;font-size: 18px;">13</span>张</span>
    <div style="font-size: 12px;margin-left: 5px;color: #9da0a0;float:right;">
      <span style="background:#fce3e1;color: red;display: block;float:left;padding: 5px;">含3张商品券</span>
      <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;" />
    </div>
  </li>
  </router-link>
  <!-- <router-link to="/phfdjq"> -->
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;" @click="center = true">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-43"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">拼好饭代金券</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  <!-- </router-link> -->
  <router-link to="/jt">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-yue"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">津贴</span>
    <span style="font-size: 12px;margin-left: 5px;color: #9da0a0;">津贴余额<span style="color:red;font-size: 18px;">20</span>元</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/wdqb">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-qianbao"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">我的钱包</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/wddz">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-dizhi"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">我的地址</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/wdsc">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">我的收藏</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/wdpj">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-pingjia"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">我的评价</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/fpzs">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-fapiao"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">发票助手</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/qydc">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-qiye"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">企业订餐</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/yqyj">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-jiangpin"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">邀请有奖</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/kfzx">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-kefu"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">客服中心</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/xyhsm">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-yonghuxieyi"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">协议和说明</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <router-link to="/xgsjhm">
  <li style="list-style:none;border-bottom:1px solid #ededed;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-shouji"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">修改手机号码</span>
    <span style="font-size: 12px;margin-left: 5px;color: #9da0a0;float:right;">157****5059<var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;" /></span>
  </li>
  </router-link>
  <router-link to="/cyjm">
  <li style="list-style:none;width:100%;padding: 10px 5px;">
  <slot style="margin-left: 5px;" >
      <i style="font-size: 20px;color: #c2c2c2;">
          <svg class="icon" aria-hidden="true" style="color:#c2c2c2">
            <use xlink:href="#icon-canyin"></use>
          </svg>
        </i>
    </slot>
    <span style="margin-left:5px;font-size: 14px;">餐饮加盟</span>
    <var-icon name="chevron-right" style="margin-right: 5px;color: #c2c2c2;float: right;" />
  </li>
  </router-link>
  <div style="margin-top:10px;">
    <var-button color="#fff" style="width:100%;border:none;box-sizing: border-box;">退出账号</var-button>
  </div>
  <!-- <router-link v-for="item in data" :to="item.path"> -->
    <!-- <var-cell border :icon="item.icn"> -->
      <!-- <var-cell border> -->
        <!-- <var-icon v-for="item2 in " :name="item2"/> -->
      <!-- {{item.sname}}
      <template #extra>
        <var-icon name="chevron-right" />
      </template>
    </var-cell> -->
  <!-- </router-link> -->


<!-- <var-cell 
  border
  v-for="item in data" :icon="item.icn"> 
      <var-icon v-for="item2 in icn" :name="item2"/>
      {{item.sname}}
    <template #extra>
      <var-icon name="chevron-right" />
    </template> -->
<!-- </var-cell> -->
</div>

 <var-popup v-model:show="center">
    <div class="popup-example-block" style="border-radius: 10%;">
      <div style="padding:30px;">即将打开“美团拼好饭”小程序</div>
      <div style="width:100%;border-top: 1px solid #999;">
        <var-button style="width:50%;border-right: 1px solid #999;" @click="center=false">取消</var-button>
        <router-link to="/mtphf">
          <var-button style="width:50%;">允许</var-button>
        </router-link>
      </div>
    </div>
  </var-popup>

</template>
<style lang="scss" scoped>
li{
  list-style:none;
}
a{
  text-decoration: none;
  color:#000;
}
.iconfont{
  color:#c2c2c2 !important;
}
.var-elevation--2{
  box-shadow:none !important;
}
.wode{
  position: fixed;
  top:0px;
  left:0px;
  z-index:2;
  background:#ffcf4f;
  height:160px;
  width:100%;
  .namm{
    height:60px;
    line-height:60px;
    text-align: center;
  }
  .bns{
    width:100%;
    height:100px;
    .bnsleft{
      width:25%;
      margin-top:10px;
      float:left;
    }
    .bnsright{
     width:60%;
     float:left;
     text-align: left;
     margin-top:30px;
     .bnsrightos1{
      font-size: 20px;
      font-weight: bold;
     }
    }
  }
}
.var-cell{
  text-align: left;
}
.var-icon{
  text-align: right;
}
.topp{
  width:100%;
  text-align: center;
}
.botom{
  width:100%;
  position: absolute;
  top:170px;
  padding-bottom: 100px;
  background: #f0f0f0;
  li{
    list-style: none;
    background: #fff;
  }
}
</style>